<template>
    <div class="wrap">
        <!-- 头部 -->
        <div class="header">
            <p class="nickname">{{info.userInfo.nickname}}</p>
            <a  @click.prevent="routeBack">返回</a>
        </div>   

        <!-- 会话 -->
        <div class="session">
            <p class="time">{{route.params.lastTime}}</p>
            <div class="chatCard" v-for="(msg,index) in msgForShow" @click="goHome(msg.flow)">

                <ChatCard  
                    :headPicSrc="info.userInfo.image"
                    :nickname="info.userInfo.nickname"
                    :flow="msg.flow"        
                    :content="msg.content"
                    ></ChatCard>

            </div>
        </div>

        <!-- 输入条 -->
        <div class="inputBar">
                <img src="@/assets/images/icon/语音.svg" alt="" class="audio">
                <input type="text" v-model="writenContent" @keydown="keydown">
                <img src="@/assets/images/icon/笑脸.svg" alt="" class="emoji">
                <img src="@/assets/images/icon/加号.svg" alt="" class="more">    
        </div>
    </div>  
</template>
    
<script setup>

    import { useRouter,useRoute } from 'vue-router'
    import {useStore} from 'vuex'
    import {onMounted,ref,reactive,watch,computed} from 'vue'
    import ChatCard from '@/components/message/ChatCard.vue'
    import {tim,sendMessage,getHistoryMsg,} from '@/hooks/useTIM.js'
    import { GoodsRequester } from '@/api/api.js'
    const GoodsRqster = new GoodsRequester();

    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    
    var curSession = computed(()=>{
        for (var c of store.state.session.conversationList){
            if (c.conversationID == c.type + route.params.id){
                return c;
            }
        }
    })

    let info = reactive({
        userInfo:{

        }
    })

    onMounted(()=>{
        GoodsRqster.reqMerchantDetial(route.params.id).then(res=>{
            info.userInfo = res.data;
        })
    })

    var msgForShow = reactive([]);
    //当会话改变时，重新加载消息记录
    watch(curSession,(newValue)=>{
        console.log('curSession is',newValue);
        if (typeof(newValue) != "undefined"){
            /* msgForShow.push({flow:'in',content:newValue.lastMessage.messageForShow}) */
            msgForShow[0] = {flow:'in',content:newValue.lastMessage.messageForShow};
            console.log('msgForShow',msgForShow);
        }
    },{immediate:true})

    let msgCount = computed(()=>{
        return store.state.session.count;
    })

    watch(msgCount,()=>{
        console.log('有新消息，count++');
        msgForShow.push(store.state.session.receiveMsg);

    })
  /*   let newMsg = computed(()=>{
        return store.state.session.receiveMsg.content;
    })

    watch(newMsg,(newValue)=>{
        console.log("newMsg变化");
        msgForShow.push({flow:'in',content:newValue});
    }) */


    //输入框中文字
    let writenContent = ref(' ');
    let msgObj = reactive({
        text:writenContent,
    })
    //回车发送消息
    let keydown = function(e){
        //回车触发发送消息事件
        if (e.key == "Enter"){
            sendMessage(route.params.id,msgObj);
            console.log(`发送消息给${route.params.id}`); 
            msgForShow.push({flow:'out',content:writenContent.value})
            writenContent.value = '';
            console.log('enter msgForshow',msgForShow);
        }
    }
    //返回函数
    let routeBack = function(){
        router.back();
    }

    function goHome(flow){
        if(flow=='in'){
            router.push({
                            name:'otherHomePage',
                            params:{
                                userId:info.userInfo.userId
                            }
                        })
        }
        else{
            router.push('/mine')
        }
    }

</script>

    
<style lang="scss" scoped>
    .wrap{
        position: relative;
        width: 4.28rem;
        min-height: 9.26rem;
        background: rgba(251,255,244,0.97);
        background-color: #F2F2F2;

        /* 头部 */
        .header{
            position: fixed;
            background-color: #6fa11e;
            width: 4.28rem;
            height: 0.88rem;
            border: 0.01rem solid rgba(187, 187, 187, 1);
            z-index: 999;
            p.nickname{
                position: absolute;
                top:0.50rem;
                width: 4.28rem;
                text-align: center;
                font-size: 0.2rem;
                font-family: Microsoft YaHei, Microsoft YaHei-Normal;
                color: #ffffff;
            }
            /* 返回 */
            a{
                position: absolute;
                /* width: 0.24rem;
                height: 0.24rem; */
                color: white;
                font-size: 0.16rem;
                top:0.53rem;
                left: 0.29rem;
            }
            
        }
        /* 会话 */
        .session{
            position: absolute;
            top:0.88rem;
            width: 4.28rem;
            background: rgba(251,255,244,0.97);
            background-color: #F2F2F2;
            margin-bottom:0.55rem ;
            p.time{
                margin-top: 0.26rem;
                width: inherit;
                text-align: center;
                color: #bcbcbc;

            }
            .chatCard{
                height: auto;

            }
        }

        /* 输入条 */
        .inputBar{
                display: flex;
                position: fixed;
                bottom: 0rem;
                width: 4.28rem;
                height: 0.55rem;
                justify-content: space-evenly;
                align-items: center;
                background-color: #eeeeee;
                img{
                        width: 0.24rem;
                        height: 0.24rem;
                }
                input{
                        width: 2.96rem;
                        height: 0.41rem;
                        border: none;
                        border-radius: 0.21rem;
                        font-size: 0.16rem;
                        padding-left: 0.15rem;
                }
        }
    }
</style>